<script setup lang="ts">
import { ref } from 'vue';
import WangEditDemo from '@/components/wangeditor/WangeditorPage.vue';

type InsertFnType = (url: string, alt: string, href: string) => void

const uploadImage = {
  // 自定义上传
  async customUpload(file: File, insertFn: InsertFnType) {
    // 自己实现上传，并得到图片 url alt href, url必填
    // 最后插入图片
    console.log('大家好=>', file);
    insertFn('', '图片', '');
  }
};

const editorDom = ref<any>();
let domValue = ref(null);

function lookText() {
  domValue.value = editorDom.value.getEditor().getHtml();
}
</script>

<template>
  <button @click="lookText">查看内容</button>
  <div style="width: 100vw;">
    <WangEditDemo ref="editorDom" height="80vh" :upload-image="uploadImage" />
  </div>
  <div v-html="domValue"></div>
</template>

<style scoped lang="scss">

</style>